<!-- 
@Author: your name
@Date: 2021-07-09 17:43:59
 * @LastEditTime: 2021-08-22 16:20:31
 * @LastEditors: Please set LastEditors
@Description: In User Settings Edit
@FilePath: \单词\main.js

路由切换 vue-router  官网 https://router.vuejs.org/zh/
npm i vue-router  -S
    在开发环境下载第三方包,专门用来实现路由切换的，下载后集成在vue项目中
   1.在开发环境下载 vue-router -S    
   2.导入 import 自定义名称 from 'vue-router'
         太大，新建router文件书写在index.js中
         记得导入   import Vue from 'vue'  
         通过 export default router 导出让main.js引入
   3.注册 Vue.use(自定义名称)
        注册会自动添加两个全局样式
            01.RouterLink
            02.RouterView
   4.创建页面组件
   5.创建路由规则 - 数组 - 路径与组件对象的映射关系
       import 组件名 from '引入组件'
       const routes = [
                初始化强制显示的
           { path: '/' , redirect: '打开页面显示的路径'
           },
            在页面中点击跳转的    添加/:自定义传值为动态路由
           { path: '/自定义配置路径/:自定义传值 ' ,
             component: 组件名,
             name:'属性名'
                如果路由对象有name属性，成为 命名路由 唯一不重复，可根据name跳转
                用js代码进行跳转
                然后在组件methods中定义函数，用下面两种方式获取组件
                函数名(){ this.$router.push({ name: '接收name属性' | path:'自定义路径' }) }
                    传参  name 后加 params:{'自定义传值'=值} 
                            子组件用 $route.params.自定义传值 接收 值
                                两者不能交换，啥传啥接
                          path 后加 query"{'自定义传值'=值}
                            子组件用 $route.query.自定义传值  接收 值
           },
            { path: '/自定义配置路径/:自定义传值 ' ,
             component: 组件名,
             可以在一级路由上嵌套二级路由 在childern内进行添加
              childern:[
                {path: '二级路由以后直接写不需要加 / ' ,
                component: 组件名,},...
                ]
             },...,
                路径输入错误显示的报错页面
           { path: '*', component: 路径没输对显示的路径
           }]
   6. 生成路由对象
       const router = new 自定义名称({ routes,mode:'history' })
            修改地址栏
            mode:'history'是去除网址中的 # | mode:'hash'是默认有 #
   7. 注入到new Vue()中
       new Vue({
           router,
       }).$mount('#app')
   8. 在展示页面输出 App.vue中用router-view作为挂载点，切换不同的路由页面
       <router-view></router-view>
       调用切换 <router-link to="/自定义配置路径">要点击的按钮</router-link>
       注意 : 一切都要以url上hash值为准
         1.动态路由{ path: '/自定义配置路径 ' , component: 组件名}
             在父组件中< router - link to = "/自定义配置路径?自定义传值=值" > 要点击的按钮</router - link >
            在子组件中用{ { $route.query.uname } } 接收
         2.动态路由{ path: '/自定义配置路径/:自定义传值 ' , component: 组件名}
            在父组件中<router-link to="/自定义配置路径/值">要点击的按钮</router-link>
            在子组件中用{ { $route.params.username } } 接收
        二级路由的页面展示
             出口和一级路由一样，但要写在当前子组件的父组件中，路径要写 /父组件路径/子组件路由
             嵌套路由的默认页面展示有两种写法
                01. 把你需要显示组件对应的path写成 空字符串  
                    path: ''
                02. 给父路由添加重定向，通过redirect属性知名要跳转的子路由的完整路径(父路径 + 子路径)
                    path: '/父路径/子路径'


    路由嵌套会自动添加两个类名
        router-link-exact-active    (精确匹配) url中hash值路径，与href属性值完全相同，设置此类明
        router-link-active          (模糊匹配) url中hash值    ，包含href属性值这个路径


    全局前置守卫  在路由跳转之前
         声明一个变量对路由权限判断，未登陆状态
        let isLogin = false
         跳转前先在这执行，在决定是否跳转
         参数1是目标 要跳转到的路由(路由对象信息)
         参数2是来源 从哪里跳转的路由(路由对象信息)
         参数3 函数体  next()才会让路由正常的跳转切换
               next(false)在原地停留
               next("强制修改到另一个路由路径上")
        router.beforeEach((to, from, next) => {
          if (to.path === "要去的路径" && isLogin === false) {
            alert('please log in ')
            next(false)
          } else {
            不调用，页面留在原地
            next()
          }
        })

        clearInterval(this.time)          Date.now()
          删除定时器                        现在的日期

        encodeURIComponent()
          将地址上出现特殊字符  转换成需要url编码 

        <keep-alive> 
          包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
            include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
            exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
            max - 数字。最多可以缓存多少组件实例。
          当组件在 <keep-alive> 内被切换，
            它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
            只在 <keep-alive> 内生效


        /deep/ 深度选择器
            在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，
            这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式

            export default store
            js中，默认导出 store

            export function removeToken() {}
            js中按需导出 removeToken 
            
            context.commit('')
            删除本地存储的信息
            
            // 在 element 中 点击按钮触发当前事件，进行表单兜底校验
            onSubmit() {
              //通过 form 中定义的 ref="form" 获取表单进行校验
            this.$refs.form.validate(async valid => {
              //如果没有数据直接返回
              if (!valid) return

              // 网址有is通过 this.$route.query.id 获取员工的id
              const id = this.$route.query.id
              //调用 saveUserDetailById 接口，将 id 和 当前表单数据返回后台
              const res = await saveUserDetailById(id, this.form)

              // 更新成功以后，给用户提示
              this.$message.success(res.message)
              // 更新成功以后，调用 getUserDetailById 接口获取最新的数据
              this.getUserDetailById()
            })
          },
 -->
